<template>
    <div>
        <div class="title">
            热销推荐

            </div>
     <div>
     <ul >
         <li class="itemContent border-bottom" v-for="(item,index) of list" :key="index">
             <img :src="item.imgUrl"/>
             <div class="content">
                 <p class="itemTitle">{{item.title }} </p>
                 <p class="des">{{item.desc}}</p>
                 <span class="price">￥100起</span>
             </div>
         </li>
     </ul>
            </div>
    </div>
</template>

<script>
export default {
    name:'HomeRecomment',
    data(){
        return{
           
        }
    },
    props:{
        list:Array
    }
}
</script>

<style lang="stylus" scoped>
@impotr '~styles/mixins.styl'
@import '~styles/varibles.styl'
.title{
    height :40px;
    line-height 40px;
    background-color: #eee;
    padding-left 12px;
}
.itemContent{
    overflow: hidden
    display flex;
    height :90px;
    overflow hidden

}
.itemContent img {

    margin 12px;
    width 66px;
    height 66px;
}
.content{
   flex 1; 

   padding-top  12px;
}
.itemTitle{
    font-size 15px;
    line-height 15px
    color $darkTextColor

}
.des{
    font-size 15px;
    line-height 15px
    color $darkTextCol
    margin-top 6px
}
.price{
    display block
    margin-top 12px;
    color  #ff9300
}


</style>